<template>
	<view class="view-box">
		<view class="uni-tab">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" @click="ontabtap(index)">
				<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}({{index==0?checkNum:unCheckNum}})</text>
			</view>
		</view>
		<view class="line-h"><text :style="{left: tabIndex==0?0:'50%'}"></text></view>
		<view class="check-list" v-if="tabIndex==0">
			<view class="info-item" v-for="(item, index) in checkList" :key="`${index}${item.id}`">
				<image class="info-head" :src="headHandle(item)" mode="aspectFill"></image>
				<text class="info-name">{{item.name}}</text>
			</view>
		</view>
		<view class="uncheck-list check-list" v-else>
			<view class="info-item" v-for="(item, index) in uncheckList" :key="`${index}${item.id}`">
				<image class="info-head" :src="headHandle(item)" mode="aspectFill"></image>
				<text class="info-name">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			noticeLogId: '',
			tabIndex: 0,
			tabBars: [{
				name: '已读',
				id: '1'
			}, {
				name: '未读',
				id: '2'
			}],
			checkList: [],
			uncheckList: [],
			checkNum: 0,
			unCheckNum: 0
		} 
	},
	onLoad(options) {
		this.noticeLogId = options.logid
		this.getOverGradeNotice()
	},
	methods: {
		getOverGradeNotice(){
			this.api.get('chatGroupManage/lookOverGradeNotice', {
				noticeLogId: this.noticeLogId
			}).then(res=>{
				if(res.data.state != 'ok') return
				let data = res.data || {}
				this.checkNum = data.checkNum;
				this.unCheckNum = data.unCheckNum;
				this.checkList = data.checkList;
				this.uncheckList = data.uncheckList
			})
		},
		ontabtap(i){
			this.tabIndex = i
		},
		headHandle(info){
			// 处理头像显示
			info.avatarUrl = info.pic
			return this.utils.headImage(info)
		},
	}
}
</script>
<style lang="less" scoped>
	.uni-tab{
		margin: 0 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.line-h {
		margin: 0 28rpx;
		height: 4rpx;
		position: relative;
		text{
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			height: 4rpx;
			background: #333333;
			transition: all .3s;
		}
	}
	.uni-tab-item-title-active{
		color: #333333;
		font-weight: 600;
	}
	.uni-tab-item {
		height: 80rpx;
		line-height: 80rpx;
		width: 50%;
		text-align: center;
	}
	
	.check-list{
		margin-top: 24rpx;
	}
	.info-item{
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 32rpx;
		padding: 29rpx 0;
		&::after{
			position: absolute;
			left: 0;
			bottom: 0;
			content: '';
			width: 200%;
			height: 2rpx;
			background-color: #eee;
			transform: scale(0.5) translateX(-50%);
		}
	}
	.info-head{
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		margin-right: 20rpx;
	}
	.info-name{
		font-size: 30rpx;
		color: #333333;
	}
</style>